<template>
  <div>
    <el-container>
      <el-aside width="160px">
        <el-menu
            default-active="/setup/account"
            class="el-menu-vertical-demo"
            mode="vertical"
            @open="handleOpen"
            @close="handleClose"
            @select="handleSelect"
            text-color="#8493a5"
            style="height: 100%;overflow: hidden"
            router="true"
        >
          <el-menu-item index="/setup/account">
            <el-icon><UserFilled /></el-icon>
            <span>账号和密码</span>
          </el-menu-item>
          <el-menu-item index="/setup/message">
            <el-icon><BellFilled /></el-icon>
            <span>消息与邮件</span>
          </el-menu-item>
          <el-menu-item index="/setup/hide">
            <el-icon><Hide /></el-icon>
            <span>屏蔽</span>
          </el-menu-item>
          <el-menu-item index="/setup/privacy">
            <el-icon><Briefcase /></el-icon>
            <span>隐私</span>
          </el-menu-item>
          <el-menu-item index="/setup/card">
            <el-icon><PictureFilled /></el-icon>
            <span>卡片贴纸设置</span>
          </el-menu-item>
          <el-menu-item index="/setup/preferences">
            <el-icon><setting /></el-icon>
            <span>偏好设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main style="width:100%;margin: 0;padding: 0;overflow: hidden">
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import {ref} from "vue";

</script>

<style scoped>
.el-tab-pane{
  height: 50px  ;
}
</style>